'use client';

import {
  OAUTH_CLIENT_REVIEW_STATE_KEY,
  OAUTH_CLIENT_STATE_KEY,
} from '@/lib/constant';
import type { IOauthClient } from '@/interfaces';
import { formatDate } from '@/lib/tool';

export default function QueryOauthClientInfo({
  details,
}: {
  details: IOauthClient;
}) {
  return (
    <div className="row">
      <div className="col">
        <div className="card">
          <div className="card-header bg-transparent text-muted">
            <i className="bi bi-info-square me-2"></i>
            {details.name}
          </div>
          <div className="card-body">
            <div className="table-responsive">
              <table className="table table-hover align-middle table-striped">
                <thead>
                  <tr className="text-nowrap">
                    <th scope="col" className="fw-normal">
                      ID
                    </th>
                    <th scope="col" className="fw-normal">
                      {details.id}
                    </th>
                  </tr>
                </thead>
                <tbody>
                  {Object.keys(details)
                    .filter((item) => !['id'].includes(item))
                    .map((item) => {
                      return (
                        <tr key={item} className="text-nowrap">
                          <td>
                            {item === 'createdBy' && '创建用户'}

                            {item === 'updatedBy' && '更新用户'}

                            {item === 'creatorAlias' && '创建者别名'}

                            {item === 'updaterAlias' && '更新者别名'}

                            {item === 'createdOn' && '创建时间'}

                            {item === 'updatedOn' && '更新时间'}

                            {item === 'deleted' && '是否删除'}

                            {item === 'clientId' && '客户端 Id'}

                            {item === 'name' && '名称'}

                            {item === 'overview' && '概述'}

                            {item === 'logo' && '图标地址'}

                            {item === 'website' && '站点地址'}

                            {item === 'callback' && '回调地址'}

                            {item === 'state' && '状态'}

                            {item === 'reviewState' && '审核状态'}

                            {item === 'reviewReason' && '审核理由'}
                          </td>
                          <td>
                            {item === 'createdBy' && details[item]}

                            {item === 'updatedBy' && details[item]}

                            {item === 'creatorAlias' && details[item]}

                            {item === 'updaterAlias' && details[item]}

                            {item === 'createdOn' && formatDate(details[item])}

                            {item === 'updatedOn' && formatDate(details[item])}

                            {item === 'deleted' && details[item] + ''}

                            {item === 'clientId' && details[item]}

                            {item === 'name' && details[item]}

                            {item === 'overview' && details[item]}

                            {item === 'logo' && details[item]}

                            {item === 'website' && details[item]}

                            {item === 'callback' && details[item]}

                            {item === 'state' &&
                              (details[item] === 'ENABLE' ? (
                                <i
                                  className="bi bi-patch-check-fill me-2 text-success"
                                  title="启用"
                                ></i>
                              ) : (
                                OAUTH_CLIENT_STATE_KEY[details[item]]
                              ))}

                            {item === 'reviewState' &&
                              (details[item] === 'SUCCESSFUL' ? (
                                <i
                                  className="bi bi-patch-check-fill me-2 text-success"
                                  title="通过"
                                ></i>
                              ) : (
                                OAUTH_CLIENT_REVIEW_STATE_KEY[details[item]]
                              ))}

                            {item === 'reviewReason' && details[item]}
                          </td>
                        </tr>
                      );
                    })}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
